<template>
  <div>
    <van-nav-bar title="评论" left-arrow fixed @click-left="$router.back()" />
    <div class="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="obj in list" :key="obj.id">
            <template>
              <div>
                <div class="wrap">
                  <div class="img_wrap">
                    <img :src="obj.user.avatarUrl" alt="">
                  </div>
                  <div class="content_wrap">
                    <div class="header_wrap">
                      <div class="info_wrap">
                        <p>{{ obj.user.nickname }}</p>
                        <p>{{ obj.time }}</p>
                      </div>
                      <div>{{ obj.likedCount }} 点赞</div>
                    </div>
                    <div class="footer_wrap">
                      {{ obj.content }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getCommentListAPI } from '@/api/index'
export default {
  data() {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      page: 0,
    }
  },
  methods: {
    onRefresh() {
      this.list = [];
      this.getList();
      this.page = 1;
    },
    async getList() {
      const res = await getCommentListAPI({
        id: this.$route.query.id,
        limit: 20,
        offset: (this.page - 1) * 20
      })
      res.data.comments.forEach(obj =>
        this.list.push(obj));

      // this.list = res.data.comments;
      this.isLoading = false;
      this.loding = false;
    },
    async onLoad() {
      this.page++;
      this.getList();
      console.log(this.getList());
    }
  },



}
</script>

<style>
.main {
  padding-top: 46px;
}

.wrap {
  display: flex;
}

.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}

.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.content_wrap {
  flex: 1;

}

.header_wrap {
  display: flex;
}

.info_wrap {
  flex: 1;
}

.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666
}

.info_wrap P:last-of-type {
  font-size: 0.24rem;
  color: #999;
}

.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}

.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>